<template>
  <el-dialog v-model="props.visible" title="基础工作量设定" modal-class="body-content" width="600px" align-center @close="emits('cancel')">
    <div class="form-body">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
        <el-table :data="form.tableData" border style="width: 100%">
          <el-table-column prop="typeName" label="类型" width="180" />
          <el-table-column prop="levelName" label="级别" width="180" />
          <el-table-column prop="workload" label="额定科研工作量">
            <template #default="scope">
              <el-form-item label="" :prop="`[${scope.$index}].workload`">
                <el-input-number v-if="props.type === 'edit'" v-model="scope.row.workload" :min="0" :max="9999.99"
                  :controls="false" :precision="2" />
                <div v-else>{{ scope.row.workload }}</div>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emits('cancel', false)">取消</el-button>
        <el-button v-loading="updateLoading" type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { assessmentDetail, assessmentUpdate } from '@/api/assessment';
import { AssessmentDetailVO, BaseSuccessRespDTO, WorkLoadSettingVO } from '@/api/assessment/types';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['cancel'])

const formRef = ref()

const form = ref<{
  tableData: WorkLoadSettingVO[]
}>({
  tableData: []
})

const rules = {
  workload: [{ required: true, message: "额定科研工作量不能为空", trigger: "blur" }]
}

const detail = ref<AssessmentDetailVO>({})

const { run: getDetail } = useRequest(() => assessmentDetail({ id: props.id }), {
  manual: true,
  onSuccess: (res: AssessmentDetailVO) => {
    form.value.tableData = res?.workloadSetting || []
    detail.value = res || {}
  }
})

const { run: update, loading: updateLoading } = useRequest(assessmentUpdate, {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      ElMessage({
        message: '修改成功!',
        type: 'success',
        plain: true,
      })
      emits('cancel')
    }
  }
})

const handleSubmit = () => {
  formRef.value?.validate(valid => {
    if (valid) {
      update({
        id: props.id,
        name: detail.value?.name,
        startTime: detail.value.startTime,
        endTime: detail.value.endTime,
        workloadSetting: form.value.tableData
      })
    }
  })
}

watch(() => props.visible, () => {
  if (props.visible && props.id) {
    getDetail()
  }
}, { immediate: true })

</script>

<style lang="scss">
.body-content{
  .el-dialog__body{
    padding-right: 0!important;
  }
  .form-body{
    @apply: max-h-[60vh] pr-[20px] overflow-auto;
    .el-table td.el-table__cell div{
      @apply: m-auto;
    }
  }
}
</style>